<template>
  <div class="ip-wlan">
    <el-card>
      <div class="top-search">
        <el-form :model="queryParams" label-width="auto" :inline="true">
          <el-form-item label="VLAN名称">
            <el-input v-model="queryParams.vlanName" placeholder="请输入" @keydown.enter="getList"> </el-input>
          </el-form-item>
          <el-form-item label="网关">
            <el-input v-model="queryParams.vlanGateway" placeholder="请输入"   @keydown.enter="getList">  </el-input>
          </el-form-item>

          <!-- <el-form-item v-if="unfoldFlag" label="vlanID">
            <el-input v-model="searchConfig.policeName" placeholder="请输入"> </el-input>
          </el-form-item>
          <el-form-item v-if="unfoldFlag" label="CIDR">
            <el-input v-model="searchConfig.policeRuleId" placeholder="请输入"> </el-input>
          </el-form-item>

          <el-form-item v-if="unfoldFlag" label="创建时间">
            <el-date-picker v-model="searchConfig.vlanTime" type="daterange" range-separator="到" start-placeholder="开始时间" end-placeholder="结束时间" />
          </el-form-item>

          <el-form-item v-if="unfoldFlag" label="创建人">
            <el-select v-model="searchConfig.vlanCreator" placeholder="请选择">
              <el-option label="111" value="1" />
              <el-option label="dragon" value="0" />
            </el-select>
          </el-form-item> -->

          <el-form-item label="">
            <el-button type="primary" @click="getList" v-has-permi="['ip:vlan:query']">查询</el-button>
            <el-button plain @click="resertList">重置</el-button>
            <!-- <el-button @click="unfoldForm" plain>
              {{ !unfoldFlag ? '展开' : '收起' }}
              <el-icon class="el-icon--right">
                <ArrowDown v-if="!unfoldFlag" />
                <ArrowUp v-else />
              </el-icon>
            </el-button> -->
          </el-form-item>
        </el-form>
      </div>
      <div class="table-top">
        <el-button type="primary" v-has-permi="['ip:vlan:add']" @click="add_drawer">增加</el-button>
        <el-button type="success" v-has-permi="['ip:vlan:edit']" @click="edit_drawer">编辑</el-button>
        <el-button type="danger" v-has-permi="['ip:vlan:delete']" @click="del_drawer">删除</el-button>
        <!-- <el-button plain>立即检测</el-button> -->
        <!-- <el-button plain>导入</el-button>
        <el-button plain>导出</el-button>  -->
      </div>
      <div class="table-content">
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column property="vlanId" width="150" label="ID" show-overflow-tooltip />
          <el-table-column property="vlanName" width="180" label="vlan名称" />
          <el-table-column property="vlanGateway" width="150" label="网关"> </el-table-column>
          <el-table-column property="cird" width="150" label="CIDR" />
          <el-table-column property="startIp" width="150" label="起始IP（网络地址）" />
          <el-table-column property="endIp" width="150" label="截止IP（广播地址）" />
          <el-table-column property="poolSize" width="150" label="IP池大小" />
          <el-table-column property="activeCount" width="150" label="活动IP" />
          <el-table-column property="whiteCount" width="150" label="白IP" />
          <el-table-column property="blackCount" width="150" label="黑IP" />
          <el-table-column property="hasWhiteCount" width="150" label="已使用白IP" />
          <el-table-column property="dontWhiteCount" width="150" label="未使用白IP" />
          <el-table-column property="checkTime" width="180" label="检查时间" />
          <el-table-column property="creator" width="150" label="创建人" />
          <el-table-column property="name" width="150" label="操作" fixed="right">
            <template #default="scope">
              <div>
                <el-button plain type="info" size="small" v-has-permi="['ip:vlan:detail']" @click="toDetail(scope.row)">详情</el-button>
                <el-button plain size="small" v-has-permi="['ip:vlan:detection']" @click="testVlan(scope.row)">检测</el-button>
              </div> 
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
      </div>
    </el-card>

    <add-drawer v-model:drawer-flag="drawerFlag" :drawerTile="drawerTile" :getList="getList" :rowData="rowData"></add-drawer>

    <!-- 详情 -->
    <el-drawer v-model="detailFlag" :title="detailTitle" direction="rtl" size="100%" :close-on-click-modal="false">
      <DetailDrawer ref="detailDrawerRef" :detailRowData="detailRowData" />
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue';
import AddDrawer from './components/AddDrawer.vue';
import  DetailDrawer from './components/DetailDrawer'
import {ipVlanList ,ipVlanDel  ,ipCheck} from '@/api/ip'
import { ElTable } from 'element-plus';
onMounted(async() => {
  await getList()
});
 

const total = ref(0);
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    vlanName:'',
    vlanGateway:""
  },
  unfoldFlag: false,
  drawerFlag: false,// 抽屉
  drawerTile: '',//抽屉的标题
  tableData:[],
  rowData:{},
  detailFlag:false,
  detailTitle:"",
  detailRowData:{}
});
const { queryParams, unfoldFlag, drawerFlag, drawerTile ,tableData ,rowData ,detailFlag ,detailTitle ,detailRowData} = toRefs(data);

// 展开
const unfoldForm = () => {
  unfoldFlag.value = !unfoldFlag.value;
};

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  console.log(val);

  multipleSelection.value = val;
};

const add_drawer = () => {
  drawerFlag.value = true
  drawerTile.value = '添加VLAN'
}
const edit_drawer = () => {
  if(multipleSelection.value&&multipleSelection.value.length!==1){
    ElMessage.error('请选择一条数据')
    return false
  }
  drawerFlag.value = true
  drawerTile.value = '修改VLAN'
  rowData.value = multipleSelection.value[0]
}
const del_drawer = () => {
  if(multipleSelection.value&&multipleSelection.value.length===0){
    ElMessage.error('请至少选择一条数据')
    return false
  }

  ElMessageBox.confirm(
    '确认要删除吗',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      const arr = multipleSelection.value.map((item:any)=>item.vlanId)
      console.log(arr);
      const res = await ipVlanDel(arr)
      console.log(res);
      if(res.code===200){
        ElMessage.success('删除成功')
      await  getList()
      }


    })
    .catch(() => {

    })
}

/* 检测 */
const testVlan = async(row)=>{
  let loading =  ElLoading.service({ text: '检测中...', background: 'rgba(0, 0, 0, 0.7)' });
  const res=  await ipCheck([row.vlanId])
  console.log(res);
  if(res.data){
    ElMessage.success('检测成功')
    loading.close()
    setTimeout(async() => {
      await getList()
    }, 500);
  }else{
    loading.close()
  }

}

/* 详情 */
const toDetail = async(row)=>{
  console.log(row);
  detailTitle.value = row.vlanName
  detailFlag.value = true
  detailRowData.value = row
}

/* 重置 */
const resertList = async()=>{
  queryParams.value= {
    pageNum: 1,
    pageSize: 10,
    vlanName:'',
    vlanGateway:""
  }
  await getList()
}

const getList = async() => {
  drawerFlag.value = false
const res  = await ipVlanList({...queryParams.value})
console.log(res);
tableData.value = res.rows
total.value = res.total

};
</script>

<style scoped lang="scss">
.ip-wlan {
  padding: 8px;
  width: 100%;
  height: 100%;

  .el-card {
    width: 100%;
    height: 100%;

    .table-top {
      margin-bottom: 20px;
    }

    .table-content {
      width: 100%;
    }
  }

}
</style>
